<template>
	<view class="container">
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
							:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<view class="pay_card">
					<view class="pending_pay_time">
						<view class="buy_time">2022/09/09 16:15:15</view>
						<view class="rest_time">剩余支付时间：03:15:11</view>
					</view>
					<view class="pay_card_info">
						<view class="info_left">
							<image style="width: 62px;height: 62px;" src="../../static/image/invite.png" mode=""></image>
							<text>某某某商品</text>
						</view>
						<view class="info_right">
							<text class="price">¥5.56</text>
							<text class="num">共1件</text>
						</view>
					</view>
					<view class="pay_card_total">
						<text>合计实付：￥<text>5.56</text></text>
					</view>
					<view class="card_btn_wrap">
						<button class="pay_btn" type="default">立即支付</button>
					</view>
				</view>
				<view class="pay_card">
					<view class="pending_pay_time">
						<view class="buy_time">2022/09/09 16:15:15</view>
						<view class="rest_time">已完成</view>
					</view>
					<view class="pay_card_info">
						<view class="info_left">
							<image style="width: 62px;height: 62px;" src="../../static/image/invite.png" mode=""></image>
							<text>某某某商品</text>
						</view>
						<view class="info_right">
							<text class="price">¥5.56</text>
							<text class="num">共1件</text>
						</view>
					</view>
					<view class="pay_card_total">
						<text>合计实付：￥<text>5.56</text></text>
					</view>
					<view class="card_btn_wrap">
						<button class="pay_btn" type="default">删除订单</button>
						<button class="pay_btn" type="default">申请售后</button>
						<button class="pay_btn" type="default">再来一单</button>
					</view>
				</view>
			</view>
			<view v-if="current === 1">
				<view class="pay_card" v-for="item in 5">
					<view class="pending_pay_time">
						<view class="buy_time">2022/09/09 16:15:15</view>
						<view class="rest_time">剩余支付时间：03:15:11</view>
					</view>
					<view class="pay_card_info">
						<view class="info_left">
							<image style="width: 62px;height: 62px;" src="../../static/image/invite.png" mode=""></image>
							<text>某某某商品</text>
						</view>
						<view class="info_right">
							<text class="price">¥5.56</text>
							<text class="num">共1件</text>
						</view>
					</view>
					<view class="pay_card_total">
						<text>合计实付：￥<text>5.56</text></text>
					</view>
					<view class="card_btn_wrap">
						<button class="pay_btn" type="default">立即支付</button>
					</view>
				</view>
			</view>
			<view v-if="current === 2">
				<view class="pay_card" v-for="item in 5">
					<view class="pending_pay_time">
						<view class="buy_time">2022/09/09 16:15:15</view>
						<view class="rest_time">商品准备中（提货单号：1）</view>
					</view>
					<view class="pay_card_info">
						<view class="info_left">
							<image style="width: 62px;height: 62px;" src="../../static/image/invite.png" mode=""></image>
							<text>某某某商品</text>
						</view>
						<view class="info_right">
							<text class="price">¥5.56</text>
							<text class="num">共1件</text>
						</view>
					</view>
					<view class="pay_card_total">
						<text>合计实付：￥<text>5.56</text></text>
					</view>
					<view class="card_btn_wrap">
						<button class="pay_btn" type="default">申请退款</button>
					</view>
				</view>
			</view>
			<view v-if="current === 3">
				<view class="pay_card" v-for="item in 5">
					<view class="pending_pay_time">
						<view class="buy_time">2022/09/09 16:15:15</view>
						<view class="rest_time">已完成</view>
					</view>
					<view class="pay_card_info">
						<view class="info_left">
							<image style="width: 62px;height: 62px;" src="../../static/image/invite.png" mode=""></image>
							<text>某某某商品</text>
						</view>
						<view class="info_right">
							<text class="price">¥5.56</text>
							<text class="num">共1件</text>
						</view>
					</view>
					<view class="pay_card_total">
						<text>合计实付：￥<text>5.56</text></text>
					</view>
					<view class="card_btn_wrap">
						<button class="pay_btn" type="default">删除订单</button>
						<button class="pay_btn" type="default">申请售后</button>
						<button class="pay_btn" type="default">再来一单</button>
					</view>
				</view>
			</view>
			<view v-if="current === 4"><text class="content-text">退款/售后</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
           return {
			    userInfo: null,
			    items: ['全部订单', '待付款', '待提货', '已完成', '退款/售后'],
			    current: 0,
			   	activeColor: '#242724',
			   	styleType: 'text'
		   }
		},
		created() {
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo && userInfo.openId) {
				this.userInfo = userInfo
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			}
		}
	}
</script>

<style scoped lang="scss">
page {
	background: #ffffff;
}
.container {
	padding: 0 15px;
	box-sizing: border-box;
}
.uni-common-mt {
    margin-top: 10px;
}
.content {
	/* display: flex;
	justify-content: center;
	align-items: center; */
	margin: 12px;
	/* text-align: center; */
}

.content-text {
	font-size: 14px;
	color: #666;
}

.color-tag {
	width: 25px;
	height: 25px;
}
.uni-list {
	flex: 1;
}

.uni-list-item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex: 1;
	flex-direction: row;
	background-color: #FFFFFF;
}
.uni-list-item__container {
	padding: 12px 15px;
	width: 100%;
	flex: 1;
	position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	box-sizing: border-box;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #eee;
}
.uni-list-item__content-title {
	font-size: 14px;
}
.pay_card {
	width: 100%;
	height: 218px;
	margin-bottom: 12px;
	padding: 8px 10px;
	box-sizing: border-box;
	border-radius: 4px;
	background: #FFFFFF;
	color: #242724;
	font-size: 14px;
}
.pending_pay_time {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	.buy_time {
		color: #979797;
	}
	.rest_time {
		color: #FF0000;
	}
}
.pay_card_info {
	margin: 8px 0 10px 0;
	padding: 10px 0;
	border-top: 1px solid #ECECEC;
	border-bottom: 1px solid #ECECEC;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	.info_left {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}
	.info_left image {
		margin-right: 12px;
	}
	.info_right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.price {
			font-size: 16px;
			font-weight: bold;
		}
		.num {
			color: #979797;
		}
	}
}
.pay_card_total {
	width: 100%;
	padding: 10px 0;
	border-bottom: 1px solid #ECECEC;
	color: #242724;
	text-align: right;
}
.card_btn_wrap {
	width: 100%;
	// display: flex;
	// flex-direction: row;
	// align-items: center;
	// justify-content: flex-end;
	margin-top: 10px;
	text-align: right;
	.pay_btn {
		width: 86px;
		height: 28px;
		line-height: 28px;
		background: #242724;
		color: #FFFFFF;
		font-size: 12px;
		float: right;
		margin-left: 10px;
	}
}
</style>
